<template>
  <div id="exportReport">
    <el-form :inline="true" size="mini">
      <el-form-item label="报告周期：">
        <el-select size="mini" @change="cycleChange" v-model="cycleValue" placeholder="请选择">
          <el-option v-for="(item, index) in cycleOption" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="!(cycleValue=='day' || cycleValue== 'userDefine')" label="报告年份：">
        <el-date-picker size="mini" :clearable="false" v-model="years" type="year" placeholder="选择年份"
          :picker-options="expireTimeOption">
        </el-date-picker>
      </el-form-item>

      <el-form-item v-if="cycleValue=='day' || cycleValue== 'userDefine'" label="报告时间：">
        <div>
          <vue-datepicker-local v-model='selectTime[0]' :disabled-date="startTimeOption">
          </vue-datepicker-local>-
          <vue-datepicker-local v-model='selectTime[1]' :disabled-date="endTimeOption">
          </vue-datepicker-local>
          <i @click="closeTime" class="saas-icon-icon-close"></i>
        </div>
        <!-- <date-picker-rang v-model="selectTime"></date-picker-rang> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import VueDatepickerLocal from 'vue-datepicker-local'
  export default {
    data () {
      var expireTimeOption = {
        disabledDate (date) {
          return (Date.now() <= date.getTime())
        }
      }
      return {
        expireTimeOption: expireTimeOption,
        // value: ['', ''],
        cycleOption: [{
          value: 'day',
          label: '日报'
        }, {
          value: 'month',
          label: '月报'
        }, {
          value: 'year',
          label: '年报'
        }, {
          value: 'userDefine',
          label: '自定义'
        }],
        years: new Date(),
        cycleValue: 'day',
        selectTime: ['', ''],
        timeOptions: []
      }
    },

    components: { VueDatepickerLocal },

    model: {
      prop: 'selectTime',
      event: 'returnBack'
    },

    watch: {
      selectTime (newName, oldName) {
        this.handleNodeClick()
      },
      cycleValue () {
        this.selectTime = ['', '']
        // this.handleNodeClick()
      },

      years () {
        this.selectTime = ['', '']
      }
    },

    mounted () {
      let dateTime = {
        selectTime: ['', ''],
        reportType: 'day'
      }
      this.$emit('returnBack', dateTime)
    },

    methods: {
      // 切换报告周期，同时切换报告时间
      cycleChange () {
        this.timeOptions = []
      },

      handleNodeClick () {
        let filterTime = ['', '']
        let reportType = ''
        if (this.years == null) {
          return
        }
        if (this.cycleValue === 'userDefine') {
          filterTime = [this.selectTime[0] !== '' ? this.formmatDate(this.selectTime[0], 'yyyy-MM-dd') : '', this.selectTime[1] !== '' ? this.formmatDate(this.selectTime[1], 'yyyy-MM-dd') : '']
          reportType = 'userDefine'
        } else if (this.cycleValue === 'month') {
          filterTime = [this.years.getFullYear() + '-01', this.years.getFullYear() + 1 + '-01']
          reportType = 'month'
        } else if (this.cycleValue === 'day') {
          reportType = 'day'
          filterTime = [this.selectTime[0] !== '' ? this.formmatDate(this.selectTime[0], 'yyyy-MM-dd') : '', this.selectTime[1] !== '' ? this.formmatDate(this.selectTime[1], 'yyyy-MM-dd') : '']
        } else if (this.cycleValue === 'year') {
          reportType = 'year'
          filterTime = [this.years.getFullYear() + '', this.years.getFullYear() + 1 + '']
        }
        console.log(filterTime, '筛选时间')
        console.log(reportType, '报告类型')
        let dateTime = {
          selectTime: filterTime,
          reportType: reportType
        }
        this.$emit('returnBack', dateTime)
      },

      // 结束日期的判断
      endTimeOption (date) {
        if (this.years == null || this.cycleValue === 'day' || this.cycleValue === 'userDefine') {
          if (this.selectTime[0] !== '') {
            return (date.getTime() < this.selectTime[0].getTime()) || (date.getTime() > Date.now())
          } else {
            return date.getTime() > Date.now()
          }
        } else {
          if (this.selectTime[0] !== '') {
            return (date.getTime() < this.selectTime[0].getTime()) || (date.getTime() > Date.now()) || !(date.getTime() >= new Date(this.years.getFullYear() + '-01-01 0:0:0') && date.getTime() <= new Date(this.years.getFullYear() + 1 + '-01-01 0:0:0'))
          } else {
            return date.getTime() > Date.now() || !((date.getTime() >= new Date(this.years.getFullYear() + '-01-01 0:0:0') && date.getTime() <= new Date(this.years.getFullYear() + 1 + '-01-01 0:0:0')))
          }
        }
      },
      // 开始日期的判断
      startTimeOption (date) {
        if (this.years == null || this.cycleValue === 'day' || this.cycleValue === 'userDefine') {
          if (this.selectTime[1] !== '') {
            return (date.getTime() > this.selectTime[1].getTime()) || (date.getTime() > Date.now())
          } else {
            return date.getTime() > Date.now()
          }
        } else {
          if (this.selectTime[1] !== '') {
            return (date.getTime() > this.selectTime[1].getTime()) || (date.getTime() > Date.now()) || !(date.getTime() >= new Date(this.years.getFullYear() + '-01-01 0:0:0') && date.getTime() <= new Date(this.years.getFullYear() + 1 + '-01-01 0:0:0'))
          } else {
            return date.getTime() > Date.now() || !((date.getTime() >= new Date(this.years.getFullYear() + '-01-01 0:0:0') && date.getTime() <= new Date(this.years.getFullYear() + 1 + '-01-01 0:0:0')))
          }
        }
      },
      closeTime () {
        this.selectTime = ['', '']
        this.$emit('returnBack', this.selectTime)
      }
    }
  }
</script>
<style scoped>
  .saas-icon-icon-close {
    font-size: 16px;
    position: relative;
    top: 2px;
  }
</style>
